<template>
  <div v-loading="treeLoading" class="app-container">
    <div class="menu-cls">
      <div class="dept-tree-button">
        <el-button type="primary" @click="toAdd()">顶层菜单</el-button>
      </div>
      <el-input v-model="filterText" placeholder="根据名称查询" style="margin-bottom:20px;"/>
      <el-tree
        ref="tree2"
        :data="data2"
        :props="defaultProps"
        :filter-node-method="filterNode"
        class="dept-tree"
      >
      <span slot-scope="{ node, data }" class="dept-tree-node">
        <span>
          {{ data.name }}
        <el-tag v-if="data.method" size="mini" type="info" effect="dark">
          {{ data.method }}
        </el-tag>
        </span>
        <el-tag v-if="data.type === 1" size="mini" effect="dark">
          菜单
        </el-tag>
        <el-tag v-if="data.type === 2" size="mini" type="danger" effect="dark">
          接口
        </el-tag>
        <el-tag v-if="data.type === 3" size="mini" type="warning" effect="dark">
          集合
        </el-tag>
        <div class="dept-tree-node-button">
          <el-button
            type="text"
            size="mini"
            class="el-icon-plus"
            @click="() => toAdd(node, data)">
            添加
          </el-button>
          <el-button
            type="text"
            size="mini"
            class="el-icon-edit"
            @click="() => toEdit(node, data)">
            编辑
          </el-button>
           <el-button
             type="text"
             size="mini"
             class="el-icon-delete"
             @click="() => toDelete(node, data)">
            删除
          </el-button>
        </div>

      </span>
      </el-tree>
    </div>
    <el-dialog
      :title="dialogTitle"
      width="450px"
      :visible.sync="showDialog"
      :close-on-click-modal="false"
      @close="reset">
      <el-form ref="form" :model="payload" :rules="rules" label-width="100px" status-icon>
        <el-form-item label="父节点">
          <el-input v-model="payload.parentName" disabled/>
        </el-form-item>
        <el-form-item label="编码" prop="code">
          <el-input v-model="payload.code" placeholder="请输入编码"/>
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input v-model="payload.name" placeholder="请输入名称"/>
        </el-form-item>
        <el-form-item label="地址" prop="uri">
          <el-input v-model="payload.uri" placeholder="请输入地址"/>
        </el-form-item>
        <el-form-item v-if="showMethod" label="请求类型" prop="method">
          <el-select v-model="payload.method" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="图标" prop="icon">
          <el-input v-model="payload.icon" placeholder="请输入图标"/>
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-radio-group v-model="payload.type" size="medium">
            <el-radio :label="1">菜单</el-radio>
            <el-radio :label="2">接口</el-radio>
            <el-radio :label="3">集合</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showDialog = false">取 消</el-button>
        <el-button type="primary" @click="doSave()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        treeLoading: false,
        filterText: '',
        data2: [],
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        options: ['GET', 'POST', 'PUT', 'DELETE'],
        showDialog: false,
        dialogTitle: '',
        payload: {},
        rules: {
          code: [{ required: true, message: '请填写菜单组编码', trigger: 'blur' }],
          name: [{ required: true, message: '请填写菜单名称', trigger: 'blur' }],
          uri: [{ required: true, message: '请填写菜单地址', trigger: 'blur' }],
          type: [{ required: true, message: '请选择菜单类型', trigger: 'blur' }]
        },
        showMethod: false
      }
    },
    watch: {
      filterText(val) {
        this.$refs.tree2.filter(val)
      },
      'payload.type'(val) {
        if (val === 2) {
          this.showMethod = true
        } else {
          this.showMethod = false
        }
      },
      showDialog(val) {
        if (val === false) {
          this.reset()
        }
      }
    },
    created() {
      this.getTreeData()
    },
    methods: {
      filterNode(value, data) {
        if (!value) return true
        return data.name.indexOf(value) !== -1
      },
      getTreeData() {
        this.treeLoading = true
        this.$http.request({
          url: `/resource/menus`,
          data: {},
          tokenRefresh: () => this.getTreeData()
        }).then(res => {
          this.data2 = res.menuTree
          this.treeLoading = false
        })
      },
      toAdd(parent, data) {
        if (parent) {
          this.dialogTitle = '添加菜单'
          this.payload = { parentId: data.id, parentName: data.name, node: parent }
        } else {
          this.dialogTitle = '添加顶级菜单'
          this.payload = {}
        }
        this.showDialog = true
      },
      toEdit(node, data) {
        this.payload = {
          id: data.id,
          name: data.name,
          code: data.code,
          uri: data.uri,
          type: data.type,
          icon: data.icon,
          parentId: data.parentId,
          parentName: data.parentId !== -1 ? node.parent.data.name : '',
          data,
          node
        }
        this.dialogTitle = '编辑'
        this.showDialog = true
      },
      toDelete(node, data) {
        this.$confirm('是否删除该数据?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http.request({
            method: 'delete',
            url: `/resource/menu/${data.id}`

          }).then(res => {
            this.$message.success('删除成功')
            const parent = node.parent
            const children = parent.childNodes
            const index = children.findIndex(d => d.data.id === data.id)
            children.splice(index, 1)
          })
        }).catch(() => {
        })
      },
      doSave() {
        this.$refs.form.validate(valid => {
          if (!valid) {
            return
          }
          const payload = this.payload
          const isAdd = !payload.id
          const data = {
            code: payload.code,
            name: payload.name,
            uri: payload.uri,
            type: payload.type,
            icon: payload.icon,
            parentId: payload.parentId || -1
          }
          if (!isAdd) data.id = payload.id
          this.$http.request({
            method: isAdd ? 'post' : 'put',
            url: `/resource/menu`,

            data: JSON.stringify(data)
          }).then(() => {
            this.$message.success('保存成功')
            this.showDialog = false
            this.getTreeData()
          })
        })
      },
      reset() {
        this.$refs.form.resetFields()
      }
    }
  }
</script>
<style lang="scss">
  .dept-tree-node {
    font-size: 14px;
    line-height: 26px;
  }

  .dept-tree .el-tree-node__content {
    position: relative;
  }

  .dept-tree-node-button {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0 10px;
    cursor: default;
  }

  .dept-tree-node-button > i {
    margin: 0 2px;
    cursor: pointer;
  }

  .dept-tree-button {
    margin-bottom: 20px;
  }

  .menu-cls {
    width: 600px;
  }
</style>
